<template>

  <!--  风险点调查表单-->
  <div class="page_monitor-add">
    <el-form
      ref="form"
      :rules="rules"
      label-position="right"
      :model="currentRow"
      label-suffix="："
      label-width="140px">
      <el-card class="paicha_view">
        <p v-if="currentRow.id&&!isLook"   style="color: red;font-weight: 600;text-align: center;margin-bottom: 10px">如需修改管养单位、路线、边坡三个选项，请联系管理员！</p>
        <p v-else-if="!currentRow.id&&!isLook"  style="color: red;font-weight: 600;text-align: center;margin-bottom: 10px">提交表单后，管养单位、路线、边坡三个选项将不可修改，请谨慎选择！</p>

        <el-form-item label="管养单位" prop="deptTreeId" style="margin-top: 20px">
          <organization
            :disabled="isLook||currentRow.id"
            v-model="currentRow.deptTreeId"
            placeholder="选择管养单位"
            @change="changeDept"
          ></organization>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="调查单位" prop="investigationDeptTreeId">
              <organization
                :disabled="isLook"
                v-model="currentRow.investigationDeptTreeId"
                placeholder="选择调查单位"
                @change="changeDept"
              ></organization>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路线" prop="roadId">
              <el-select
                :disabled="isLook||currentRow.id"
                :popper-append-to-body="false"
                v-model="currentRow.roadId"
                clearable
                filterable
                placeholder="选择路线"
                @change="changeRoad">
                <el-option
                  v-for="item in roadSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="边坡" prop="slopeId">
              <el-select
                :popper-append-to-body="false"
                v-model="currentRow.slopeId"
                :disabled="isLook||currentRow.id"
                filterable
                clearable
                @change="changeSlope"
                placeholder="选择边坡">
                <el-option
                  v-for="item in slopeSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="边坡位置" prop="positionName">
              <el-input v-model="slopeInfo.positionName" disabled clearable placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起止桩号" prop="stoke">
              <el-input v-model="slopeInfo.stoke" disabled clearable placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="调查人员" prop="investigator">
              <el-input v-model="currentRow.investigator" :disabled="isLook" clearable placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="调查日期" prop="investigationTime">
              <el-date-picker
                style="width: 100%"
                v-model="currentRow.investigationTime"
                type="date"
                :disabled="isLook"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="风险评估等级" prop="investigationTime">
              <el-tag size="mini" :style="currentRow.riskLevel| gradeDangerColor" style="color: white;">
                {{currentRow.riskLevelName}}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="margin-bottom: 30px">
          <el-divider><span style="font-size: 25px; color: #1990FE;">调查内容</span></el-divider>

        </div>
        <div style="width: 100%" class="contentBoxs">
          <el-tabs style="margin-top: 30px" tab-position="top" v-model="activeNames1">
            <el-tab-pane
              v-for="item in template"
              :key="item.id"
              :label="item.name"
              :name="item.name">

              <div v-if="item.name === '（一）边坡基本信息'" style="width: 100%;height: 550px;overflow-y: auto">
                <el-form-item>
                  <el-tabs v-model="activeNames3" tab-position="left">
                    <el-tab-pane v-for="child2 in item.childList"
                                 :key="child2.id"
                                 :label="child2.name"
                                 :name="child2.name">


                      <div v-for="child3 in child2.childList" :key="child3.id ">

                        <el-collapse v-model=" child2.value">

                          <el-collapse-item :title="child3.name" :name="item.value"
                          >


                            <!-- 填写-->
                            <div v-if="child3.name=='(A)断面几何特征'">
                              <el-row :gutter="20">
                                <el-col :span="12" v-for="child4 in child3.childList" :key="child4.id">
                                  <span style="font-size: 110%;font-weight: 600">      {{child4.name}}</span>
                                  <el-input
                                    placeholder="请输入"
                                    v-model="child4.value"
                                  >
                                    <template slot="append"
                                              v-if="(child4.name).substr((child4.name).length - 1, 2)=='度'">
                                      m
                                    </template>
                                    <template slot="append" v-else>°</template>
                                  </el-input>
                                </el-col>
                              </el-row>
                            </div>
                            <!--单选-->
                            <div v-if="child3.name=='(B)坡体结构'">
                              <el-row :gutter="20">
                                <el-col :span="12" v-for="child4 in child3.childList" :key="child4.id"
                                        style="margin-bottom: 10px">
                                  <el-popover
                                    placement="top-start"
                                    title="选项分数"
                                    width="300"
                                    trigger="click"
                                    @show="showPopver(child4.childList)">
                                    <div v-for="item in tipLists" :key="item.name">
                                      <div
                                        style="width: 100%;height: 30px;display: flex;align-content: center;justify-content: space-between">
                                        <p style="width: 50%;height: 100%;font-size: 20px;font-weight: 600">
                                          {{item.name}}:</p>
                                        <p style="width: 50%;height: 100%;font-size: 16px;font-weight: 600">
                                          {{item.title}}</p>

                                      </div>
                                      <hr>
                                    </div>
                                    <i slot="reference" class="el-icon-question"
                                       style="color: #303133;margin-right: 10px"></i>
                                  </el-popover>
                                  <span style="font-size: 110%;font-weight: 600">      {{child4.name}}</span>
                                  <el-select v-model="child4.value" placeholder="请选择" :disabled="isLook">
                                    <el-option
                                      v-for="child4 in child4.childList"
                                      :key="child4.code"
                                      :label="child4.name"
                                      :value="child4.code+ ''">
                                    </el-option>
                                  </el-select>
                                </el-col>
                              </el-row>
                            </div>
                            <!-- 单选和多选-->
                            <div v-if="child3.name=='(C)气象与水文地质条件'">
                              <el-row :gutter="20">
                                <el-col :span="6" v-for="child4 in child3.childList" :key="child4.id"
                                        style="margin-bottom: 10px">
                                  <el-popover
                                    placement="top-start"
                                    title="选项分数"
                                    width="300"
                                    trigger="click"
                                    @show="showPopver(child4.childList)"
                                    style="padding: 10px"
                                  >
                                    <div v-for="item in tipLists" :key="item.name">
                                      <div
                                        style="width: 100%;height: 30px;display: flex;align-content: center;justify-content: space-between">
                                        <p style="width: 50%;height: 100%;font-size: 20px;font-weight: 600">
                                          {{item.name}}:</p>
                                        <p style="width: 50%;height: 100%;font-size: 16px;font-weight: 600">
                                          {{item.title}}</p>

                                      </div>
                                      <hr>
                                    </div>
                                    <i slot="reference" class="el-icon-question"
                                       style="color: #303133;margin-right: 10px"></i>
                                  </el-popover>
                                  <span style="font-size: 110%;font-weight: 600">      {{child4.name}}</span>
                                  <el-input v-if="child4.mathTypeName=='区间'" v-model="child4.value" placeholder="请输入"
                                            :disabled="isLook" type="number">
                                    <template slot="append">
                                      mm
                                    </template>
                                  </el-input>
                                  <el-select v-else v-model="child4.value" placeholder="请选择" :disabled="isLook">
                                    <el-option
                                      v-for="child4 in child4.childList"
                                      :key="child4.code"
                                      :label="child4.name"
                                      :value="child4.code+ ''">
                                    </el-option>
                                  </el-select>
                                </el-col>
                              </el-row>
                            </div>
                            <div v-if="child3.name=='(D)区域地质条件'">

                              <el-row :gutter="20">
                                <el-col :span="12" v-for="child4 in child3.childList" :key="child4.id"
                                        style="margin-bottom: 10px">
                                  <el-popover
                                    placement="top-start"
                                    title="选项分数"
                                    width="300"
                                    trigger="click"
                                    @show="showPopver(child4.childList)"
                                    style="padding: 10px"
                                  >
                                    <div v-for="item in tipLists" :key="item.name">
                                      <div
                                        style="width: 100%;height: 30px;display: flex;align-content: center;justify-content: space-between">
                                        <p style="width: 50%;height: 100%;font-size: 20px;font-weight: 600">
                                          {{item.name}}:</p>
                                        <p style="width: 50%;height: 100%;font-size: 16px;font-weight: 600">
                                          {{item.title}}</p>

                                      </div>
                                      <hr>
                                    </div>
                                    <i slot="reference" class="el-icon-question"
                                       style="color: #303133;margin-right: 10px"></i>
                                  </el-popover>
                                  <span style="font-size: 110%;font-weight: 600">      {{child4.name}}</span>
                                  <el-select v-model="child4.value" placeholder="请选择" :disabled="isLook">
                                    <el-option
                                      v-for="child4 in child4.childList"
                                      :key="child4.code"
                                      :label="child4.name"
                                      :value="child4.code+ ''">
                                    </el-option>
                                  </el-select>
                                </el-col>
                              </el-row>
                            </div>
                          </el-collapse-item>
                        </el-collapse>
                      </div>


                    </el-tab-pane>
                  </el-tabs>

                </el-form-item>
              </div>
              <div v-if="item.name === '（二）边坡动态信息'" style="width: 100%;height: 550px;overflow-y: auto">
                <el-form-item>
                  <el-tabs style="margin-top: 30px" tab-position="left">
                    <el-tab-pane
                      v-for="child2 in item.childList"
                      :key="child2.id"
                      :label="child2.name">
                      <div v-for="child3 in child2.childList" :key="child3.id ">
                        <div>
                          <div style="display: flex;align-items: center">
                            <el-popover
                              placement="top-start"
                              title="选项分数"
                              width="300"
                              trigger="click"
                              @show="showPopver(child4.childList)"
                              style="padding: 10px"
                            >
                              <div v-for="item in tipLists" :key="item.name">
                                <div
                                  style="width: 100%;height: 30px;display: flex;align-content: center;justify-content: space-between">
                                  <p style="width: 50%;height: 100%;font-size: 20px;font-weight: 600">
                                    {{item.name}}:</p>
                                  <p style="width: 50%;height: 100%;font-size: 16px;font-weight: 600">
                                    {{item.title}}</p>

                                </div>
                                <hr>
                              </div>
                              <i slot="reference" class="el-icon-question"
                                 style="color: #303133;margin-right: 10px"></i>
                            </el-popover>
                            <span style="display: inline-block;width: 120px">   {{child3.name}}</span>
                            <div style="margin-bottom: 10px">
                              <el-select v-model="child3.value" placeholder="请选择" :disabled="isLook">
                                <el-option
                                  v-for="child4 in child3.childList"
                                  :key="child4.id"
                                  :label="child4.name"
                                  :value="child4.code+ ''">
                                </el-option>
                              </el-select>
                            </div>
                          </div>
                        </div>
                      </div>

                    </el-tab-pane>
                  </el-tabs>

                  <div v-for="child2 in item.childList"
                       :key="child2.id">
                  </div>
                </el-form-item>
              </div>
              <div v-if="item.name === '（三）边坡防护工程状态'" style="width: 100%;height: 550px;overflow-y: auto">
                <el-form-item>
                  <el-checkbox-group size="large" v-model="item.valueList" :min="0"
                                     :max="3" @change="((val)=>{changeZhiHu(val,item.childList,item.name)})">
                    <el-checkbox-button
                      v-for="child2 in item.childList"
                      :key="child2.id"
                      :label="child2.id+''">
                      {{child2.name}}
                    </el-checkbox-button>
                  </el-checkbox-group>

                  <div v-for="child2 in item.childList"
                       :key="child2.id">
                    <el-collapse-transition>
                      <el-collapse v-if=" item.valueList.indexOf(child2.id) > -1">
                        <el-collapse-item :title="child2.name" :name="child2.value">
                          <div>
                            <span>工程重要程度：</span>
                            <el-input-number v-model="child2.weight" :disabled="isLook"
                                            :max="item.valueList.length"
                                             style="margin-bottom: 10px"></el-input-number>
                            <span style="color: #848484" v-if="typeof(child2.weight) =='number'">
                                                    权重：γ:{{child2.weight|weightEchoHandel(item.valueList.length)}}
                            </span>
                            <el-checkbox-group size="small" v-model="child2.valueList"
                                               @change="((val)=>{changeZhiHu2(val,child2.childList,child2.name)})" :min="0"
                            >
                              <el-checkbox-button
                                v-for="child3 in child2.childList" :key="child3.id "
                                :label="child3.id+''">
                                {{ child3.name }}
                              </el-checkbox-button>
                            </el-checkbox-group>
                            <!--最终选择-->

                            <div v-for="child3 in child2.childList" :key="child3.id ">

                              <el-collapse v-show="child2.valueList.indexOf(child3.id) > -1">
                                <el-collapse-item :title="child3.name">

                                  <el-checkbox-group v-if="child3.mathTypeName=='权重'" size="small"
                                                     v-model="child3.valueList"
                                                     @change="((val)=>{changeZhiHu3(val,child3.childList,child3.name)})" :min="0"
                                  >
                                    <el-checkbox-button
                                      v-for="child4 in child3.childList" :key="child4.id "
                                      :label="child4.id+''">
                                      {{ child4.name }}
                                    </el-checkbox-button>
                                  </el-checkbox-group>
                                  <span>工程重要程度1：</span>

                                  <el-input-number v-model="child3.weight" :disabled="isLook" :min="1"
                                                   :max="child2.valueList.length"
                                                   style="margin-bottom: 10px"></el-input-number>
                                  <span style="color: #848484" v-if="typeof(child3.weight) =='number'">
                                                    权重：γ:{{child3.weight|weightEchoHandel(child2.valueList.length)}}
                                     </span>
                                  <div v-for="child4 in child3.childList" :key="child4.id "
                                  >
                                    <div v-if="child4.mathTypeName=='单选'"
                                         style="width: 30%;display: inline-block;margin-right: 10px">
                                      <el-popover
                                        placement="top-start"
                                        title="选项分数"
                                        width="300"
                                        trigger="click"
                                        @show="showPopver(child4.childList)"
                                        style="padding: 10px"
                                      >
                                        <div>
                                          <div
                                            style="display: flex;justify-content: space-between;align-items: center; flex-wrap: wrap;">
                                            <div v-for="item in tipLists" :key="item.name"
                                            >
                                              <div style="width: 100%;height: 20%;">
                                            <span
                                              style="width: 80%;font-size: 20px;font-weight: 600">{{item.name}}：</span>
                                                <span
                                                  style="width: 20%;font-size: 18px;font-weight: 600">{{item.title}}</span>

                                              </div>

                                            </div>
                                          </div>
                                        </div>
                                        <i slot="reference" class="el-icon-question"
                                           style="color: #303133;margin-right: 10px"></i>
                                      </el-popover>
                                      {{child4.name}}
                                      <el-select v-model="child4.value" placeholder="请选择" :disabled="isLook">
                                        <el-option
                                          v-for="child5 in child4.childList"
                                          :key="child5.id"
                                          :label="child5.name"
                                          :value="child5.code+ ''">
                                        </el-option>
                                      </el-select>
                                    </div>
                                    <div v-if="child4.mathTypeName=='累加'"
                                         style="width: 100%;display: inline-block;margin-right: 10px">
                                      <div>
                                        <el-collapse v-show="child3.valueList.indexOf(child4.id) > -1" size="small"
                                                     v-model="child3.value">
                                          <el-collapse-item
                                            :title="child4.name">
                                            <span>工程重要程度：</span>

                                            <el-input-number v-model="child4.weight" :disabled="isLook" :min="1"
                                                             :max="child3.valueList.length"
                                                             style="margin-bottom: 10px"></el-input-number>
                                            <span style="color: #848484" v-if="typeof(child4.weight) =='number'">
                                                    权重：γ:{{child4.weight|weightEchoHandel(child3.valueList.length)}}
                                     </span>
                                            <div style="width: 100%;display: inline-block;margin-right: 10px">
                                              <div v-for="child5 in child4.childList"
                                                   :key="child5.id"
                                                   style="width: 30%;display: inline-block;margin-right: 10px">
                                                <el-popover
                                                  placement="top-start"
                                                  title="选项分数"
                                                  width="300"
                                                  trigger="click"
                                                  @show="showPopver(child5.childList)"
                                                  style="padding: 10px"
                                                >
                                                  <div v-for="item in tipLists" :key="item.name">
                                                    <div
                                                      style="width: 100%;height: 30px;display: flex;align-content: center;justify-content: space-between">
                                                      <p
                                                        style="width: 50%;height: 100%;font-size: 20px;font-weight: 600">
                                                        {{item.name}}:</p>
                                                      <p
                                                        style="width: 50%;height: 100%;font-size: 16px;font-weight: 600">
                                                        {{item.title}}</p>

                                                    </div>
                                                    <hr>
                                                  </div>
                                                  <i slot="reference" class="el-icon-question"
                                                     style="color: #303133;margin-right: 10px"></i>
                                                </el-popover>

                                                {{child5.name}}
                                                <el-select v-model="child5.value" :placeholder="child5.name"
                                                           :disabled="isLook">
                                                  <el-option
                                                    v-for="child6 in child5.childList"
                                                    :key="child6.id"
                                                    :label="child6.name"
                                                    :value="child6.code+ ''">
                                                  </el-option>
                                                </el-select>
                                              </div>

                                            </div>
                                          </el-collapse-item>
                                        </el-collapse>
                                      </div>
                                    </div>
                                  </div>
                                </el-collapse-item>
                              </el-collapse>
                              <div>

                              </div>
                            </div>

                          </div>

                        </el-collapse-item>
                      </el-collapse>
                    </el-collapse-transition>

                  </div>
                </el-form-item>
              </div>
              <div v-if="item.name === '（四）边坡功能信息'" style="width: 100%;height: 550px;overflow-y: auto">
                <el-form-item label-width="100px">

                  <div
                    v-for="child2 in item.childList"
                    :key="child2.id"
                  >
                    <div v-for="child3 in child2.childList"
                         :key="child3.id"
                         style="width:100%;display:flex;align-items: center;margin-bottom: 10px">
                      <el-popover
                        v-if="child3.mathTypeName=='单选'"
                        placement="top-start"
                        title="选项分数"
                        width="460"
                        trigger="click"
                        @show="showPopver(child3.childList)"
                        style="padding: 10px"
                      >
                        <div v-for="item in tipLists" :key="item.name">
                          <div
                            style="width: 100%;height: 30px;display: flex;align-content: center;justify-content: space-between">
                            <p style="width: 50%;height: 100%;font-size: 20px;font-weight: 600">
                              {{item.name}}:</p>
                            <p style="width: 50%;height: 100%;font-size: 16px;font-weight: 600">
                              {{item.title}}</p>

                          </div>
                          <hr>
                        </div>
                        <i slot="reference" class="el-icon-question"
                           style="color: #303133;margin-right: 10px"></i>
                      </el-popover>
                      <p style="width: 300px;font-size: 15px;font-weight: 600">{{child3.name}}</p>
                      <div v-if="child3.mathTypeName=='单选'"
                           style="width: 100%"
                      >
                        <el-select v-model="child3.value" :placeholder="child3.name" style="width: 100%"
                                   :disabled="isLook">
                          <el-option

                            v-for="child4 in child3.childList"
                            :key="child4.id"
                            :label="child4.name"
                            :value="child4.code+ ''">
                          </el-option>
                        </el-select>
                      </div>

                      <div v-if="child3.mathTypeName=='累加'"
                           style="width:80%;display:flex;justify-content: space-between;align-items: center">

                        <el-input-number :disabled="isLook" v-model="child3.value" @change="handleChange($event)"
                                         :min="1" :max="3"
                                         style="width: 30%"
                                         label="描述文字"></el-input-number>
                      </div>
                    </div>
                  </div>


                </el-form-item>
              </div>
              <div v-if="item.name === '边坡风险评价'" style="width: 100%;height: 550px;overflow-y: auto">
                <el-form-item>
                  <div v-for="child2 in item.childList" :key="child2.id">
                    <div
                      style="width: 100%;height: 40px;line-height: 40px;color: white;background: #1990FE;font-size: 16px;font-weight: 600;border-radius: 20px;box-sizing: border-box;padding-left: 20px;margin-bottom: 10px">
                      {{child2.name}}
                    </div>
                    <!-- 这里判断是为了修改样式-->
                    <div v-if="child2.name=='边坡灾害危险性评价'">
                      <div v-for="child3 in child2.childList" :key="child3.id"
                           style="width: 50%;display: inline-block;margin-bottom: 10px;">
                        <div v-if="child2.name=='边坡灾害危险性评价'">
                          <span style="width:150px;display: inline-block;font-size: 13px"> {{child3.name == '（三）边坡防护工程状态'?'(G)边坡防护工程状态':child3.name}}</span>
                          <el-input-number v-model="child3.weight" @change="handleChange(true)" :min="1"
                                           :max="child2.childList.length" size="mini"
                                           :disabled="isLook"></el-input-number>
                          <span style="color: #848484" v-if="typeof(child3.weight) =='number'">
                                                    权重:γ:{{child3.weight|weightEchoHandel(child2.childList.length)}}
                    </span>

                        </div>
                        <div v-else>

                          <span> {{child3.name}}</span>
                          <span style="color: #848484" v-if="child3.name=='(O)公路等级'">
                            权重：γ:0.33
                        </span>
                          <span style="color: #848484" v-if="child3.name=='(P)边坡周边设施'">
                              权重：γ:0.11
                        </span>
                          <span style="color: #848484" v-if="child3.name=='(Q)边坡灾害对公路的危害程度'">
                             权重：γ:0.56
                        </span>

                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div v-for="child3 in child2.childList" :key="child3.id"
                           style="width: 33%;display: inline-block;margin-bottom: 20px">
                        <div v-if="child2.name=='边坡灾害危险性评价'">

                          <span style="width:200px;display: inline-block"> {{child3.name == '（三）边坡防护工程状态'?'(G)边坡防护工程状态':child3.name}}</span>
                          <el-input-number v-model="child3.weight" @change="handleChange(true)" :min="1"
                                           :max="child2.childList.length"
                                           :disabled="isLook"></el-input-number>
                          <span style="color: #848484" v-if="typeof(child3.weight) =='number'">
                                                    权重：γ:{{child3.weight|weightEchoHandel(child2.childList.length)}}
                    </span>

                        </div>
                        <div v-else>

                          <span> {{child3.name}}</span>
                          <span style="color: #848484" v-if="child3.name=='(O)公路等级'">
                            权重：γ:0.33
                        </span>
                          <span style="color: #848484" v-if="child3.name=='(P)边坡周边设施'">
                              权重：γ:0.11
                        </span>
                          <span style="color: #848484" v-if="child3.name=='(Q)边坡灾害对公路的危害程度'">
                             权重：γ:0.56
                        </span>

                        </div>
                      </div>
                    </div>

                  </div>
                  <div class="calculationBox"
                       style="text-align: left;width: 100%;height: 40px;line-height: 40px;color: white;background: #1990FE;font-size: 16px;font-weight: 600;border-radius: 20px;box-sizing: border-box;padding-left: 20px;margin-bottom: 10px">
                    计算分数
                  </div>
                  <el-button type="primary" class=" common_btn-defalut" @click="calculation()">点击计算</el-button>
                  <el-row :gutter="4" v-if="calculationData.length!==0">
                    <el-col :span="4">
                      <p><span>(A)断面几何特征：</span>
                        <span style="color: #848484">
                           {{calculationData.ascore}}
                        </span></p>
                      <p><span>(F)边坡变形现状：</span>
                        <span style="color: #848484">
                       {{calculationData.fscore}}
                        </span></p>
                      <p><span>灾害危险性指数：</span>
                        <span style="color: #848484">
                              {{calculationData.sh}}
                        </span></p>
                    </el-col>
                    <el-col :span="5">
                      <p><span>(B)坡体结构：</span>
                        <span style="color: #848484">
                      {{calculationData.bscore}}
                        </span></p>
                      <p><span>(G)边坡防护工程状态</span>
                        <span style="color: #848484">
                          {{calculationData.gscore}}
                        </span></p>
                      <p><span>灾害危险度：</span>
                        <span style="color: #848484">
                              {{calculationData.shd}}
                        </span></p>
                    </el-col>
                    <el-col :span="5">
                      <p><span>(C)气象与水文地质条件：</span>
                        <span style="color: #848484">
                     {{calculationData.cscore}}
                        </span></p>
                      <p><span>(O)公路等级</span>
                        <span style="color: #848484">
                          {{calculationData.oscore}}
                        </span></p>
                      <p><span>工程风险指数：</span>
                        <span style="color: #848484">
                      {{calculationData.sri}}
                        </span></p>
                    </el-col>
                    <el-col :span="5">
                      <p><span>(D)区域地质条件：</span>
                        <span style="color: #848484">
                          {{calculationData.dscore}}
                        </span></p>
                      <p><span>(P)边坡周边设施</span>
                        <span style="color: #848484">
                          {{calculationData.pscore}}
                        </span></p>
                      <p><span>灾害危害性指数：</span>
                        <span style="color: #848484">
                          {{calculationData.sv}}
                        </span></p>
                    </el-col>
                    <el-col :span="5">
                      <p><span>(E)边坡变形历史</span>
                        <span style="color: #848484">
                           {{calculationData.escore}}
                        </span></p>
                      <p><span>(Q)边坡灾害对公路的危害程度</span>
                        <span style="color: #848484">
                          {{calculationData.qscore}}
                        </span></p>
                      <p><span>灾害危害度：</span>
                        <span style="color: #848484">
                          {{calculationData.svd}}
                        </span></p>
                    </el-col>
                  </el-row>
                </el-form-item>
              </div>
            </el-tab-pane>
            <el-tab-pane label="边坡工程简图" name="边坡工程简图" >
              <el-form-item label="上传照片" prop="picture" style="width: 100%!important;" >
                <upload-img v-model="currentRow.picList" :limit="6" :size-limit="6"
                            ref="uploadPic"></upload-img>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </el-form>
  </div>
</template>
<script>
  import {getTemplateContent, sloppeAdd, sloppeUpdate, calcOnline} from "@/services/model/form";
  import ItemMixins from "../item.mixins";
  import Organization from "@/components/organization-unit/all";
  import UploadImg from '@/components/upload-img'
  import Enums from '@/utils/enums'

  export default {
    props: ['isLook'],
    components: {
      Organization,
      UploadImg,
    },
    mixins: [ItemMixins,Enums],
    data() {
      return {
        picShow:false,
        isweightEchoHandel: false,
        isSee: false,
        stepActive: 1,
        tipLists: [],
        calculationData: [],//计算数据
        rules: {
          deptTreeId: {required: true, message: "请选择管养单位"},
          roadId: {required: true, message: "请选择路线"},
          slopeId: {required: true, message: "请选择边坡"},
          patrolTime: {required: true, message: "请选择调查时间"},
          userName: {required: true, message: "请输入调查人"},
        },
        activeNames1: '（一）边坡基本信息',
        activeNames2: '(E)边坡变形历史',
        activeNames3: '土质边坡',
        currentRow: {
          formId: 6,
        },
        template: [],
        EnumMaintenanceInspectionList: [],
      };
    },
    filters: {
      gradeDangerColor(val) {
        switch (val) {
          case 0:
            return 'background-color:#0DC26B'
          case 1:
            return 'background-color:#0073b7'
          case 2:
            return 'background-color:#f39c12'
          case 3:
            return 'background-color:#ff851b'
          case 4:
            return 'background-color:#e43321'
          default:
            return 'background-color:#e43321'
        }
      },
      weightEchoHandel(weight, length) {
        if (weight < 1 || length < 1) {
          return '0'
        }
        let echo = [
          [1],
          [0.75, 0.25],
          [0.56, 0.33, 0.11],
          [0.44, 0.31, 0.19, 0.06],
          [0.36, 0.28, 0.2, 0.11, 0.05],
          [0.31, 0.25, 0.19, 0.14, 0.08, 0.03],
          [0.27, 0.22, 0.18, 0.14, 0.1, 0.06, 0.03],
          [0.23, 0.2, 0.17, 0.14, 0.11, 0.08, 0.05, 0.02],
          [0.21, 0.19, 0.16, 0.14, 0.01, 0.09, 0.06, 0.03, 0.01],
          [0.19, 0.17, 0.15, 0.13, 0.11, 0.09, 0.07, 0.05, 0.03, 0.01]
        ]

        return echo[length - 1][weight - 1]
      },
    },
    methods: {
      //在线计算
      async calculation() {
        let formJson = JSON.stringify(this.template)
        let form = this.currentRow
        form.formJson = formJson
        let res = await calcOnline(form)
        this.calculationData = res.data
      },
      showPopver(value) {
        this.tipLists = []
        value.forEach((item) => {
          this.tipLists.push({
            name: item.name,
            title: item.score
          })

        })
      },
      // 多选
      handleChange(weight, length) {
        if (weight == true) {
          this.isweightEchoHandel = true

        }
      },

      changeZhiHu(val, item, name) {
        //展示处理
        this.template.map(x => {
          if (x.name === name) {
            x.childList.map(y => {
              y.weight = ''
            })
          }
        })
        // this.$forceUpdate()
      },
      changeZhiHu2(val, item, name) {

      },
      changeZhiHu3(val, items) {
      },
      async getTemplate(row) {
        this.currentRow = {formId: 6,}
        this.template = []
        if (row) {
          this.currentRow = row
          this.template = row.formList
          this.changeDept()
        } else {
          let res = await getTemplateContent({formType: 6});
          this.template = res.data;
          this.template.weight = 1

        }
      },
      // 新增编辑提交数据
      async submitData() {
        this.currentRow.formJson = JSON.stringify(this.template);
        let action = this.currentRow.id ? sloppeUpdate : sloppeAdd
        let res = await action(this.currentRow);
        if (res.code === 200) {
          this.currentRow = {};
          this.template = []
          this.$notify({
            type: "success",
            title: "提示",
            message: "添加成功",
          });
          this.$emit("submitClose");
        }
      },
      // 表单校验
      validatorForm() {

        return new Promise((resolve) => {
          this.$refs.form.validate((valid) => {
            if (valid && resolve) {
              this.submitData();
            }
          });
        });
      },
      //获取路线列表
      async changeDept() {
        let list = await this.getRoadListByDept(this.currentRow.deptTreeId);
        this.currentRow.investigationDeptTreeId = this.currentRow.deptTreeId
        if (list.length > 0) {
          this.$set(this.currentRow, "roadId", list[0].id);
          this.changeRoad()
        } else {
          this.$set(this.currentRow, "roadId", "");
          this.$set(this.currentRow, "slopeId", "");
        }
      },
      //查询灾害点列表
      async changeRoad() {
        this.slopeSelectList = [];
        const {roadId, deptTreeId} = this.currentRow;
        let list = await this.getSelectSlopeList(deptTreeId, roadId)
        if (list.length > 0) {
          this.$set(this.currentRow, "slopeId", list[0].id);
          this.getSlopeInfo(list[0].id)
        } else {
          this.$set(this.currentRow, "slopeId", "");
        }
      },
      changeSlope() {
        this.getSlopeInfo(this.currentRow.slopeId)
      },
    },
    created() {
    },
    mounted() {
      // 启用状态枚举
      this.queryDictList(["EnumMaintenanceInspection"], ["EnumMaintenanceInspectionList"]);

    },
    activated() {
    },
  };
</script>
<style lang="less" scoped>
  .hover_card {
    height: 100px;
    line-height: 90px;
    font-size: 20px;
    margin-top: 10px;

  }

  .page_monitor-add {
    margin: 0 auto;

    .page-title {
      margin-bottom: 20px;
      padding: 28px;
      font-size: 30px;
      line-height: 18px;
      text-align: center;
      color: #1990FE;
      font-weight: 600;
      border-radius: 20px;
      box-shadow: 0px 0px 4px #161616;
      margin-top: 10px;
    }

    /deep/ .el-tabs__item.is-active {
      font-size: 20px;
      border-radius: 5px;
      font-weight: 600;
      color: white;
      text-align: center;
      background-color: #1990FE;
      padding: 0 10px;
    }

    /deep/ .el-tabs__content {
      height: 600px;
      /*overflow: auto;*/
    }

    /deep/ .el-tabs__item {
      font-size: 16px;
    }
  }

  .form_box {
    padding: 20px;
  }

  .s-white {
    color: #ffffff;
  }

  .el-steps--simple {
    margin-bottom: 20px;
  }

  .button-foot {
    margin-top: 10px;
    text-align: center;
    padding: 10px;

    .el-button {
      background: #1990FE;
      border: none;
    }
  }

  .paicha_view {
    overflow: auto;
    height: 88vh;

    /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
      background-color: #1990FE;
      border-color: #1990FE;

      margin-top: 10px;
      margin-bottom: 20px;

    }

    /deep/ .el-checkbox-button__inner {
      margin-top: 10px;
      margin-bottom: 20px;
      border-left: 1px solid #DCDFE6 !important;
    }

    /deep/ .el-tabs__active-bar {
      height: 0px
    }

    .el-tabs {
      padding-left: 40px;

      .el-tabs__active-bar {
        background: #1990FE;
      }

      .el-tabs__item {
        color: white;
      }

      .is-active {
        color: #1990FE;
      }

      .el-radio-button {
        span:hover {
          color: white;
          background: #1990FE;
        }
      }
    }

    .el-input--suffix .el-input__inner {
      color: #1990FE;
    }

    .el-card {
      box-shadow: 0px 0px 8px #757575;
      background: #ffffff;
      color: #1990FE;
      box-shadow: none;
      // font-size: 140%;
    }
  }

  .hover_card:hover {
    background: #1990FE !important;
    font-size: 210%;
    color: white !important;
    font-weight: 600;
  }

  // 设置单选框选中颜色
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: #1990FE;
    border-color: #1990FE;
  }

  .paicha_view .el-card {
    border: 1px solid #1990FE !important;
  }

  /*/deep/.el-checkbox-button {*/
  /*width:80px !important;*/
  /*  margin-right: 20px !important;*/
  /*}*/
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }

  /deep/ .el-collapse .el-collapse-item__header {
    background: #1990FE;
    color: white;
    font-weight: 600;
    font-size: 110%;
    margin-bottom: 10px;


  }

  /deep/ .el-row {
    /deep/ .el-col {
      font-weight: 600;
      font-size: 110%;
    }
  }

  /deep/ .el-form-item {

  }

  .contentBoxs {
    ::-webkit-scrollbar {
      width: 0px;
      height: 0px;

    }

    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
      background-color: #1990FE;
      border-radius: 0px;

    }

    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }

    /deep/ .el-collapse .el-collapse-item__header {
      margin-right: 20px;
    }
  }

  .contentBoxs {
    width: 100%;
    height: 30vh;

  }
</style>
<style lang="less">
  .el-popover {
    padding: 0;

    p {
      box-sizing: border-box;
      padding-left: 20px;
    }
  }

  .el-popover__title {
    background: #1990FE;
    color: white;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 0;
    margin-top: -11px;
  }
</style>
